//LiuZh 2017-06-25
import React, { Component } from 'react';

import {
  View,
  Image,
  Text,
  StyleSheet,
  TouchableOpacity,
  Modal,
} from 'react-native';

import LottoDialog from './LottoDialog';

const cjUrl = 'http://115.28.64.94:8080/shequnsiwei/choujiang.do?action=beginLoggter';

let intervalId;
let currentItem = 0;//当前选中的奖品item
let playing     = false;//抽奖动画是否在进行
//图片资源
let imgAodi     = require('../../../img/aodi.png');
let imgCzk      = require('../../../img/huafei_cz.png');
let imgIphone   = require('../../../img/iphone.png');
let imgHuawei   = require('../../../img/huawei.png');
let imgBegin    = require('../../../img/begin.png');
//
let count       = 0;//抽奖动画跳的次数
let userJp      = null;//用户点击抽奖后，请求奖品

export default class Lotto extends Component{

	constructor(props){
		super(props);

		this.state = {
			bg: [true, false, false, false, false, false, false, false],
			modalVisible: false,
			canPress: false,
		};
	}

	render() {
		let bg = {backgroundColor: '#E99',};
		let data = this.props.data;
		// alert(this.props.data)
		return (
			<Image style={styles.body}
				source={require('shequnsiweiapp/src/img/cj_05_04.png')}>
				<Modal
					transparent={true}
					onRequestClose={()=>{console.log('close login dialog')}}
					visible={this.state.modalVisible}
					animationType={"fade"}>
					<LottoDialog hide={this.changeModalVisible}
						jp={userJp}/>
				</Modal>
				<View style={styles.line}>
					<View style={[styles.item, this.state.bg[0] ? bg : {}]}>
						<Image 
							style={[styles.jpImg,{height: 40,width: 40,}]}
							source={imgCzk}
							resizeMode={'contain'}/>
						<Text style={styles.jpText}>{data ? data[0].name_ : ''}</Text>
						<Text style={styles.jpNum}>{data ? data[0].remain : '-1'}</Text>
					</View>
					<View style={[styles.item, this.state.bg[1] ? bg : {}]}>
						<Image 
							style={[styles.jpImg,{height: 40,width: 40,}]}
							source={imgCzk}
							resizeMode={'contain'}/>
						<Text style={styles.jpText}>{data ? data[1].name_ : ''}</Text>
						<Text style={styles.jpNum}>{data ? data[1].remain : '-1'}</Text>
					</View>
					<View style={[styles.item, this.state.bg[2] ? bg : {}]}>
						<Image 
							style={[styles.jpImg,{height: 40,width: 40,}]}
							source={imgCzk}
							resizeMode={'contain'}/>
						<Text style={styles.jpText}>{data ? data[2].name_ : ''}</Text>
						<Text style={styles.jpNum}>{data ? data[2].remain : '-1'}</Text>
					</View>
				</View>
				<View style={styles.line}>
					<View style={[styles.item, this.state.bg[7] ? bg : {}]}>
						<Image
							style={[styles.jpImg,{height: 30,width: 30,}]}
							source={imgIphone}
							resizeMode={'contain'}/>
						<Text style={styles.jpText}>{data ? data[7].name_ : ''}</Text>
						<Text style={styles.jpNum}>{data ? data[7].remain : '-1'}</Text>
					</View>
					<TouchableOpacity
						disabled={this.state.canPress}
						style={[styles.item,{backgroundColor: 'rgba(0,0,0,0)'}]}
						onPress={this.begin}>
						<Image style={[styles.beginBtn,{transform:[{scale: 1.5}]}]}
							resizeMode={'center'}
							source={imgBegin}/>
					</TouchableOpacity>
					<View style={[styles.item, this.state.bg[3] ? bg : {}]}>
						<Image 
							style={[styles.jpImg,{height: 40,width: 40,}]}
							source={imgCzk}
							resizeMode={'contain'}/>
						<Text style={styles.jpText}>{data ? data[3].name_ : ''}</Text>
						<Text style={styles.jpNum}>{data ? data[3].remain : '-1'}</Text>
					</View>
				</View>
				<View style={styles.line}>
					<View style={[styles.item, this.state.bg[6] ? bg : {}]}>
						<Image 
							style={[styles.jpImg,{height: 30,width: 30,}]}
							source={imgHuawei}
							resizeMode={'contain'}/>
						<Text style={styles.jpText}>{data ? data[6].name_ : ''}</Text>
						<Text style={styles.jpNum}>{data ? data[6].remain : '-1'}</Text>
					</View>
					<View style={[styles.item, this.state.bg[5] ? bg : {}]}>
						<Image 
							style={[styles.jpImg,/*{height: 30,width: 30,}*/]}
							source={imgAodi}
							resizeMode={'contain'}/>
						<Text style={styles.jpText}>{data ? data[5].name_ : ''}</Text>
						<Text style={styles.jpNum}>{data ? data[5].remain : '-1'}</Text>
					</View>
					<View style={[styles.item, this.state.bg[4] ? bg : {}]}>
						<Image 
							style={[styles.jpImg,{height: 40,width: 40,}]}
							source={imgCzk}
							resizeMode={'contain'}/>
						<Text style={styles.jpText}>{data ? data[4].name_ : ''}</Text>
						<Text style={styles.jpNum}>{data ? data[4].remain : '-1'}</Text>
					</View>
				</View>
				{this.props.lottoVisible ? <View /> : <View style={{flex: 1,backgroundColor: '#F00',position: 'absolute',top:0}}/>}
			</Image>
		)
	}


//开始抽奖
	begin = () => {
		if (playing) {
			return;
		}
		playing = true;
		setTimeout(this.next, 300);
		this.postCj();
	}

	static setCanPress = (canPress) => {
		this.setState({
			canPress: canPress,
		})
	}

//提交抽奖请求
	postCj = () => {
		fetch(cjUrl, {
			method: 'POST',
			headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    	},
    	body: JSON.stringify({
        username: 'mobile1',//当前登录的用户
    	})
    }).then((response) => (response.json()))
		.then((jsonData) => {
			console.log('this is response:' + jsonData);
			userJp = jsonData;
		}).catch((error)=>{
			alert(error);
		});
	}

//改变弹出层可见性
	changeModalVisible = () => {
		this.setState({
				modalVisible: !this.state.modalVisible,
		});
	}
//动画切换下一个
	next = () => {
		if (count >= 16) {
			if(userJp){
				console.log('大于16并且奖品信息有了');
				console.log(userJp);
				if (userJp.zhongjiangxinxi) {

					alert('中奖' + userJp.zhongjiangxinxi.name_);
				} else {
				}
				playing = false;
				count = 0;
				// if (userJp.zhongjiangxinxi) {}
				return;
			}
		}
		let newBg = this.state.bg;
		newBg[currentItem] = false;
		currentItem = (currentItem + 1) >= newBg.length ? 0 : (currentItem + 1);
		newBg[currentItem] = true;
		// console.log('curr:' + currentItem);
		this.setState({
			bg: newBg,
		});
		setTimeout(this.next, 100);
		count++;
	}
}

const styles = StyleSheet.create({
	body: {
		padding: 5,
		height: 195,
		width: 283,
	},
	line: {
		flexDirection: 'row',
		flex: 1,
	},
	jpImg: {
		alignItems: 'center',
		height: 50,
		width: 50,
	},
	jpText: {
		fontSize: 8,
		color: '#000',
		position: 'absolute',
		bottom: 0,
	},
	item: {
		flex: 1,
		backgroundColor: '#FEFEFE',
		margin: 5,
		borderRadius: 3,
		justifyContent: 'center',
		alignItems: 'center',
	},
	beginBtn: {
		flex: 1,
		margin: 5,
	},
	jpNum:{
		position: 'absolute',
		right: 2,
		top: 1,
		fontSize: 10,
		color: '#000',
	}
});